<template>
	<view class="text-input">
		<view class="flex justify-between item-center mb-16">
			<view><text>文字</text></view>
			<view class="flex item-center">
				<view class="action-btn" :class="sort===0 ? 'disabled' : ''" @click="onActionClick('up')"><text>上移</text></view>
				<view class="action-btn" :class="isLast ? 'disabled' : ''" @click="onActionClick('down')"><text>下移</text></view>
				<view class="action-btn" :class="sort===0 ? 'disabled' : ''" @click="onActionClick('top')"><text>置顶</text></view>
				<view class="action-btn" @click="onActionClick('add')"><text>添加</text></view>
				<view class="action-btn" @click="onActionClick('del')"><text>移除</text></view>
			</view>
		</view>
		<view class="mb-16">
			<textarea
				class="text-color-regular w-full fs-14"
				:key="sort"
				placeholder-style="color:#A5A7A9;"
				:placeholder="placeholder"
				:maxlength="-1"
				:auto-height="autoHeight"
				v-model="content"
			/>
		</view>
	</view>
	
</template>

<script setup>
	import { nextTick, onMounted, ref, watch, watchEffect } from 'vue'
	
	const props = defineProps({
		placeholder: {
			type: String
		},
		isLast: {
			type: Boolean
		},
		sort: {
			type: Number,
			default: 0
		},
		modelValue: {
			type: String
		},
		autoHeight: {
			type: Boolean,
			default: true
		}
	})
	
	const content = ref('')
	
	const emits = defineEmits(['onActionClick', 'update:modelValue'])
	
	watch(() => props.modelValue, (value) => {
		content.value = value
	})
	
	watch(content, () => {
		if (content.value !== props.modelValue) {
			emits('update:modelValue', content.value)
		}
	})
		
	const onActionClick = (type) => {
		switch (type) {
			case 'up':
				if (props.sort === 0) return
				break
			case 'down':
				if (props.isLast) return
				break
			case 'top':
				if (props.sort === 0) return
				break
			default:
		}
		emits('onActionClick', type, props.modelValue, props.sort)
	}
	
	onMounted(() => {
		content.value = props.modelValue
	})
</script>

<style lang="scss" scoped>
	.text-input {
		color: #333;
	}
	.action-btn {
		margin-left: 12px;
		display: flex;
		padding: 2px 6px;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		border: 1px solid #9C9C9C;
		color: #5E5F61;
		font-size: 12px;
		font-weight: 400;

		&.disabled {
			color: #9C9C9C;
		}
	}
</style>